{% extends 'index.html' %}
{% load static %}


{% block content %}
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <br>
                        <h3 style="font-weight: bold; text-shadow: 2px 2px 4px #555555; text-align: center;">
                            用户画像可视化
                        </h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="icon-contain">
                                        <div class="row">
                                            <div class="col-2 align-self-center"><i
                                                    class="far fa-gem text-gradient-danger"></i></div>
                                            <div class="col-10 text-right"><h5 class="mt-0 mb-1">{{ username }}</h5>
                                                <p class="mb-0 font-12 text-muted">用户姓名</p></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-body justify-content-center">
                                    <div class="icon-contain">
                                        <div class="row">
                                            <div class="col-2 align-self-center"><i
                                                    class="fas fa-tasks text-gradient-success"></i></div>
                                            <div class="col-10 text-right"><h5 class="mt-0 mb-1">{{ accuracy }}</h5>
                                                <p class="mb-0 font-12 text-muted">用户画像模型准确率</p></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <h5 class="header-title mb-4 mt-0">商品兴趣度柱状图</h5>

                            <div id="main" style="width: 100%;height:400px; position: relative;"></div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="header-title mb-4 mt-0">评价词云图</h5>
                            <div>
                                <img src="http://127.0.0.1:8000/media/wordcloud.jpg" alt="图片加载失败"  width="100%">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- end container -->
    </div><!-- end wrapper -->
{% endblock %}

{% block script_content %}
    {% if message %}
        <script>
            alert("{{ message }}");
        </script>
    {% endif %}
    <script src="/static/js/chart.min.js"></script>
    <script src="/static/js/console-ban.min.js"></script>
    <!-- 引入ECharts -->
    <script src="/static/js/echarts.min.js"></script>
    <script>
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          name: '类别',
          data: {{ index|safe }}
        },
        yAxis: {name: '数量'},
        series: [{
          name: '数量',
          type: 'bar',
          data: {{ affinity|safe }},
          label: {
            show: true,
            position: 'top'
          }
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 在预测完成后取消等待界面
      $('#loading').hide();
    </script>
{% endblock %}

